<template>
  <base-popup v-if="showPop" :show="showPop" :show-close="false" @close="closeModel">
    <view class="pay-money">
      <view class="pay-content">
        <view class="topControl">
          <view class="title">支付方式</view>
          <view class="closeimg" @click="closeModel"><image src="/static/images/icon/icon_close.png" /></view>
        </view>
        <block v-for="(item, index) in payList" :key="index">
          <view v-if="item.pay_channel_id === '1'" :key="index" class="pay-select" @click="selectPay(item)">
            <view class="left-content">
              <b-image :src="item.icon" class-name="image" :is-asset="true" width="80" height="80" />
              <view class="o-p">{{ item.pay_channel }}</view>
            </view>
            <view class="right-content" :class="{ 'add-bgimg': payType == item.pay_channel_id }"></view>
          </view>
        </block>
        <view class="pay-sure">
          <view :class="{ selected: payType, 'o-p': true }" @click.stop.prevent="submit">{{ payButtonName }}</view>
        </view>
      </view>
    </view>
  </base-popup>
</template>

<script>
import { mapGetters } from 'vuex'
import BasePopup from '@/components/base/base-popup'
// #ifdef MP-WEIXIN
import { toPay } from '@/utils/tools'
// #endif
// #ifdef H5
// import AppUtils from '@/utils/AppUtils'
// #endif
export default {
  name: 'PayDialog',
  components: {
    BasePopup
  },
  props: {
    orderNo: {
      type: [String, Number],
      default: ''
    },
    fromType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showPop: false,
      payButtonName: '确认付款',
      payType: 0,
      payList: [
        {
          icon: '/static/images/icon/pic1.png',
          pay_channel: '微信支付',
          pay_channel_id: '1'
        },
        {
          icon: '/static/images/icon/pic4.png',
          pay_channel: '支付宝',
          pay_channel_id: '4'
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  methods: {
    show() {
      this.payType = '1'
      this.showPop = true
    },
    onBridgeReady(config) {
      const _this = this
      const wxPayInfo = config.wxPayInfo.wxJSAPIPayInfoResponse
      window.WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          appId: wxPayInfo.appId,
          timeStamp: wxPayInfo.timeStamp,
          nonceStr: wxPayInfo.nonceStr,
          package: wxPayInfo.package,
          signType: wxPayInfo.signType,
          paySign: wxPayInfo.paySign
        },
        function(res) {
          console.log('getBrandWCPayRequest', res, _this.orderNo)
          _this.$navigateTo('/pagesOrder/orderSuccess/H5ResultGet?orderNo=' + _this.orderNo)
          return
          // if (res.err_msg === 'get_brand_wcpay_request:ok') {
          //   _this.$emit('submitCallBack', { type })
          // } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
          //   _this.$emit('submitCallBack', { type })
          // }
        }
      )
    },
    async submit() {
      if (!this.payType || !this.orderNo) return
      // #ifdef H5
      const type = this.$Bridge.isInWeChat ? '3' : '2'
      if (type === '2') {
        uni.showToast({
          title: '请前往公众号【碧选】去支付',
          icon: 'none',
          duration: 3 * 1000
        })
        return
      } else if (type === '3') {
        // 公众号支付
        const result = await this.$api.orderApi.orderPay({
          provider: '',
          pay_channel: 3, // type,
          order_no: this.orderNo,
          ip: '0.0.0.0',
          code: '',
          openId: this.user.openId
        })
        this.onBridgeReady(result.data)
      }
      // #endif

      // #ifdef MP-WEIXIN
      if (this.payType === '1') {
        uni.login({
          provider: 'weixin',
          success: async res => {
            if (res.errMsg === 'login:ok') {
              const result = await this.$api.orderApi.orderPay({
                pay_channel: 6, // type,
                order_no: this.orderNo,
                // ip: window.returnCitySN ? window.returnCitySN.cip : ''
                ip: '0.0.0.0',
                code: res.code
              })
              if (result.success) {
                toPay({
                  ...result.data,
                  success: res1 => {
                    this.showPop = false
                    this.$emit('submitCallBack', { data: res1, type: this.payType })
                  },
                  fail: () => {
                    uni.showToast({
                      title: '支付失败',
                      icon: 'none',
                      duration: 3 * 1000
                    })
                  }
                })
              }
            }
          },
          fail: err => {
            uni.showToast({
              title: err.errMsg || '登录获取code失败',
              icon: 'none',
              duration: 3 * 1000
            })
          }
        })
      }
      // #endif
    },
    selectPay(item) {
      this.payType = item.pay_channel_id
    },
    closeModel() {
      this.showPop = false
      this.$emit('close')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/*付款弹层*/
// .hide-box{
//   width: 100%;
//   height: 100vh;
// }

.pay-money .pay-content {
  width: 100%;
  bottom: 0;
  left: 0;
  background: #fff;
  // border-top-left-radius: 20rpx;
  // border-top-right-radius: 20rpx;
  .topControl {
    display: flex;
    height: 80rpx;
    align-items: center;
    padding: 20rpx 30rpx;
    font-size: 34rpx;
    justify-content: space-between;
    .closeimg {
      @include extend-click();
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}

.pay-money .pay-content .pay-select {
  padding: 20rpx 50rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pay-money .pay-content .pay-select .left-content {
  display: flex;
  align-items: center;
}

.pay-money .pay-content .pay-select .left-content .o-p {
  color: #000;
  line-height: 80rpx;
  margin-left: 20rpx;
}

.pay-money .pay-content .pay-select .right-content {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 1px solid $color-tips;
}

.pay-money .pay-content .pay-select .add-bgimg {
  background: url('~@/static/images/icon/icon_radio_active.png') no-repeat;
  background-size: 100% 100%;
  border: none;
}

.pay-money .pay-content .pay-sure .o-p {
  width: 100%;
  line-height: 88rpx;
  text-align: center;
  background: rgba(200, 199, 204, 1);
  // border-radius:44rpx;
  font-size: 32rpx;
  color: #fff;
}
.pay-money .pay-content .pay-sure {
  padding: 40rpx 20rpx 30rpx 20rpx;
  .selected {
    background-color: #000;
  }
}
</style>
